<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>美多商城-随机点名</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="js/host.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/vue-2.5.16.js"></script>
    <script type="text/javascript" src="js/axios-0.18.0.min.js"></script>
    <style type="text/css">
        .color_01 {
            background-color: #f00 !important;
            color: #fff !important;
            font-size: 16px !important;
        }
        h4 {
            text-align: center !important;
            height: 40px;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="header_con">
            <div class="header">
                <div class="welcome fl">欢迎来到美多商城!</div>
                <div class="fr">
                    <div v-if="username" class="login_btn fl">
                        欢迎您：<em>[[ username ]]</em>
                        <span>|</span>
                        <a>退出</a>
                    </div>
                    <div v-else class="login_btn fl">
                        <a href="login.html">登录</a>
                        <span>|</span>
                        <a href="register.html">注册</a>
                    </div>
                    <div class="user_link fl">
                        <span>|</span>
                        <a href="user_center_info.html">用户中心</a>
                        <span>|</span>
                        <a href="cart.html">我的购物车</a>
                        <span>|</span>
                        <a href="user_center_order.html">我的订单</a>
                        <span>|</span>
                        <a href="/random_rool_call.html">随机点名</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="search_bar clearfix">
            <a href="index.html" class="logo fl"><img src="images/logo.png"></a>
            <div class="search_wrap fl">
                <form method="get" action="/search.html" class="search_con">
                    <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
                    <input type="submit" class="input_btn fr" name="" value="搜索">
                </form>
                <ul class="search_suggest fl">
                    <li><a href="#">索尼微单</a></li>
                    <li><a href="#">优惠15元</a></li>
                    <li><a href="#">美妆个护</a></li>
                    <li><a href="#">买2免1</a></li>
                </ul>
            </div>

            <div class="guest_cart fr">
                <a href="#" class="cart_name fl">我的购物车</a>
                <div class="goods_count fl" id="show_count">15</div>

                <ul class="cart_goods_show">
                    <li>
                        <img src="images/goods/goods001.jpg" alt="商品图片">
                        <h4>商品名称手机</h4>
                        <div>4</div>
                    </li>
                    <li>
                        <img src="images/goods/goods002.jpg" alt="商品图片">
                        <h4>商品名称手机</h4>
                        <div>5</div>
                    </li>
                    <li>
                        <img src="images/goods/goods003.jpg" alt="商品图片">
                        <h4>商品名称手机</h4>
                        <div>6</div>
                    </li>
                    <li>
                        <img src="images/goods/goods003.jpg" alt="商品图片">
                        <h4>商品名称手机</h4>
                        <div>6</div>
                    </li>
                </ul>
            </div>

        </div>

        <div class="main_wrap clearfix">
            <div class=" clearfix">
                <ul class="goods_type_list clearfix">
                    <li v-for="name in names">
                        <h4 v-if="select_name == name" class="color_01">[[name]]</h4>
                        <h4 v-else="">[[name]]</h4>
                    </li>
                </ul>

                <div class="pagenation">
                    <a @click="show_name()">随机点名</a>
                </div>

                <div class="pagenation">
                    <a @click="show_class(1)" id="btn01">22人工智能1班</a>
                    <a @click="show_class(2)" id="btn02">22人工智能2班</a>
                </div>
            </div>
        </div>

        <div class="footer">
            <div class="foot_link">
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">联系我们</a>
                <span>|</span>
                <a href="#">招聘人才</a>
                <span>|</span>
                <a href="#">友情链接</a>
            </div>
            <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
            <p>电话：010-****888 京ICP备*******8号</p>
        </div>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            delimiters: ['[[', ']]'], // 修改vue模板符号，防止与django冲突
            data: {
                username: '',
                bl_name: false,
                select_name: '',
                class_num: '',
                names: [],
                class_names1: ['白礼康', '常绍华', '常文豪', '常晓莹', '程江涛', '崔洋晨', '段佳苒', '高森', '郭浩琪', '韩庆贺', '侯曾元',
                    '胡超然', '黄美珠', '李开阳', '李艳洁', '李正雨', '李卓文', '路明幸', '吕晨阳', '马炎博',
                    '钱茹榆', '全炎尧', '荣芮晗', '史亚敬', '宋怡雪', '孙运召', '王恩慧', '王甲昌', '王凌杰', '王馨瑶', '王一铭', '徐远翔',
                    '杨伟伟', '杨增超', '张祖扬', '赵雨晴', '赵志宏'
                ],
                class_names2: ['陈志远', '代文康', '底冬初', '丁毓琳', '段懿峰', '高鑫', '郭梦恩', '郭译赛', '何玉杰', '胡豪杰', '黄雅航',
                    '贾超钒', '李超', '李佳熠', '李科呈', '刘家鹏', '刘梦宇', '刘圣圣', '刘晓雨', '刘星晨',
                    '卢珂欣', '吕贺祥', '聂广玉', '任思奇', '司泽伟', '宋浩然', '王梦柯', '王腾飞', '王子豪', '魏申奥', '谢林龙', '于广超',
                    '张慧琳', '张世昌',
                    '张馨月', '张雨', '周新茹', '左嘉明'
                ],
            },
            mounted(){
                // 获取cookie中的用户名
                this.username = getCookie('username');
               
            },
            methods: {
                // 退出登录按钮
                logoutfunc: function () {
                    var url = this.host + '/logout/';
                    axios.delete(url, {
                        responseType: 'json',
                        withCredentials:true,
                    })
                        .then(response => {
                            location.href = 'login.html';
                        })
                        .catch(error => {
                            console.log(error.response);
                        })
                },
                // 显示班级学生姓名
                show_class: function (class_num) {
                    btn01 = document.getElementById('btn01')
                    btn02 = document.getElementById('btn02')
                    this.class_num = class_num
                    if (class_num == 1) {      
                        btn01.classList.add('color_01')
                        btn02.classList.remove('color_01')
                        this.names = this.class_names1

                    } else {
                        btn01.classList.remove('color_01')
                        btn02.classList.add('color_01')
                        this.names = this.class_names2
                    }
                }, 
                // 某个学生被选中
                show_name: function() {
                    if (this.class_num == 1)
                        num = 36
                    else 
                        num = 37
                    let ran = Math.floor((Math.random()*num) + 10)
                    console.log('ran: ' + ran)
                    this.select_name = this.names[ran - 10]
                }
            }
            
        })
    </script>
</body>

</html>